<!-- components/content/WechatPage.vue - 微信内容组件 -->
<template>
  <scroll-view class="chat-list" scroll-y>
    <!-- 聊天列表项 -->
    <view 
      v-for="(chat, index) in chats" 
      :key="index" 
      class="chat-item"
      @click="enterChat(chat.id)"
    >
      <view class="avatar-container">
        <image :src="chat.avatar" class="avatar" />
        <view v-if="chat.unread > 0" class="unread-badge">
          {{ chat.unread > 99 ? '99+' : chat.unread }}
        </view>
      </view>

      <view class="chat-info-container">
        <view class="info-top">
          <text class="name">{{ chat.name }}</text>
          <text class="time">{{ formatTime(chat.time) }}</text>
        </view>
        <view class="message-preview">
          <text class="text">{{ chat.preview }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 通知父组件更新页面标题
const emit = defineEmits(['title-change']);
onMounted(() => {
  emit('title-change', '微信(7)');
});

// 聊天数据
const chats = ref([
  {
    id: 1,
    avatar: '/static/avatar1.png',
    name: '² 尹和英',
    preview: '快给我介绍对象，不介绍我就吐血··',
    time: new Date(Date.now() - 30 * 60 * 1000),
    unread: 2
  },
  {
    id: 2,
    avatar: '/static/avatar2.png',
    name: '娃他妈',
    preview: '我回家了，没在老家哈，你要回家···',
    time: new Date(Date.now() - 45 * 60 * 1000),
    unread: 0
  },
  // 其他聊天项保持不变...
]);

// 时间格式化函数
const formatTime = (date) => {
  const now = new Date();
  const msgDate = new Date(date);
  const diffHours = Math.floor((now - msgDate) / (1000 * 60 * 60));
  
  if (diffHours < 24) {
    return `${msgDate.getHours().toString().padStart(2, '0')}:${msgDate.getMinutes().toString().padStart(2, '0')}`;
  } else if (diffHours < 48) {
    return '昨天';
  } else {
    return `${msgDate.getMonth() + 1}/${msgDate.getDate()}`;
  }
};

// 进入聊天
const enterChat = (id) => {
  uni.navigateTo({ url: `/pages/chat/room?id=${id}` });
};
</script>

<style scoped>
/* 聊天列表样式 */
.chat-list {
  height: 100%;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-container {
  position: relative;
  margin-right: 12px;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 4px;
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #f56c6c;
  color: white;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 3px;
}

.chat-info-container {
  flex: 1;
  min-width: 0;
}

.info-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.time {
  font-size: 12px;
  color: #999;
}

.message-preview {
  display: flex;
  width: 100%;
}

.text {
  font-size: 14px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}
</style>